<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <title>扫码激活</title>
    <!-- Path to DebugGap Library JS-->
    <!-- <script src="/wechat/static/src/debuggap/debuggap.js" type="text/javascript"></script> -->
    
    <script type="text/javascript">
      // //auto config
      // localStorage.host = '192.168.1.107';
      // localStorage.port = 11111;
      // console.log(localStorage);
    </script>
    
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="/wechat/static/src/framework7/css/framework7.min.css">
    <!-- weixin JS-->
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style typer="text/css">
      #scan-bar{
          width: 70px;
      }

      .red{
          font-size:17px;
          font-weight:bold;
          /*贯穿删除线样式*/
          text-decoration:line-through;
          color: red;
      }
     
      .black{
          font-size:17px;
          font-weight:bold;
      }
    </style>
  </head>
<body>
  <div class="panel panel-left panel-cover">
    <div class="view panel-view"> ... </div>
  </div>
  <!-- Views -->
  <div class="views">
    <!-- Your main view -->
    <div class="view view-main">
      <!-- Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                </div>
                <div class="center">卡券激活</div>
                <div class="right">
                </div>
            </div>
        </div>
      <!-- Pages -->
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages  navbar-through toolbar-through">
            <!-- Page, "data-page" contains page name -->
            <div data-page="scanCards" class="page" ms-controller="cards">
                <div class="page-content">
                  <!-- "inset" class on list-block -->
                  <div class="list-block inset">
                    <div class="item-content">
                      <div class="item-title">
                        手动输入券号或点击扫码激活
                      </div>
                      <a id="scan-bar" style="width:60px" href="#" class="button  color-green">
                        <span style="font-size:15px">扫码</span>
                      </a> 
                    </div>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input id="card-code" type="text" placeholder="输入卡券号码">
                        </div>
                      </div>
                      <a id="add-cards" style="width:60px"  href="#" class="button color-blue">
                        <span style="font-size:15px">添加</span>
                      </a>
                    </div>
                  </div>
                  <!-- 循环显示已添加或者扫码的卡券 -->
                  <p ms-if="cards.length>0">
                    <span style="font-size:16px;">
                      &nbsp;&nbsp;&nbsp;&nbsp;当前已扫码或添加了{@ cards.length} 张卡券
                    </span>
                  </p>
                  <div class="list-block inset" ms-if="cards.size()>0">
                    <ul>
                      <li class="item-content" ms-repeat="cards">
                        <div class="item-inner">
                          <div class="item-title">
                            <span ms-class="{@ el.showStyle }">
                              {@ el.code }
                            </span>
                          </div>
                          <div class="item-after">
                            <a ms-click="remove(el)" style="height:initial;font-size:16px" class="button button-fill color-red">删除</a>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
              </div>
              <!-- Bottom Toolbar-->
              <div class="toolbar" ms-controller="cards" ms-if="cards.length>0">
                <div class="toolbar-inner" >
                   <a id="cleanAllCards" style="height:initial;width:100px" class="button button-big button-fill color-red">
                    <span style="font-size:22px">清空</span>
                  </a>
                   <a id="submitToPay" style="height:initial;width:100px" class="button button-big button-fill color-green">
                    <span style="font-size:22px">提交</span>
                  </a>
                </div>
              </div>
            </div>
        </div>
        
      </div>
    </div>
  </div>

 <!-- 支付界面模版 start -->
  <script type="text/template7" id="payTemplate">

    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="back link">
            <i class="icon icon-back"></i>
            <span>返回</span>
          </a>
        </div>
        <div class="center sliding">卡券支付</div>
        <div class="right">
          <a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
        </div>
      </div>
    </div>
    <div class="pages navbar-through toolbar-through">
      <div data-page="payPage" class="page page-on-center">
        <div class="page-content item-detail">
          
          <div id="activeCards" class="card">
            <div class="card-header">待激活卡券信息</div>
            <div class="card-content">
              <div class="card-content-inner">
                {{message}}
              </div>
            </div>
            <div class="card-footer" style="font-size:17px;font-weight:bold;color:green">
              {{totalInfo}}
            </div>
          </div>

          {{#js_compare "this.errorCards.length > 0"}}
          <div id="errorCards" class="card">
            <div class="card-header">无效卡券{{errorCards.length}}张</div>
            <div class="card-content">
              <div class="card-content-inner" style="color:red">
              {{errorCards}}
              </div>
            </div>
          </div>
          {{/js_compare}}

        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner" >
             <a id="weixinPay" style="height:initial;width:160px" class="button button-big button-fill color-green">
              <span style="font-size:22px">微信支付</span>
            </a>
             <a id="remainPay" style="height:initial;width:160px" class="button button-big button-fill color-blue">
              <span style="font-size:22px">余额支付</span>
            </a>
          </div>
        </div>

      </div>
    </div>

  </script>  
 <!-- 支付界面模版 end -->

  <script type="application/javascript">
  wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '${appid}', // 必填，企业号的唯一标识，此处填写企业号corpid
      timestamp: ${timestamp}, // 必填，生成签名的时间戳
      nonceStr: '${nonceStr}', // 必填，生成签名的随机串
      signature: '${signature}',// 必填，签名，见附录1
      jsApiList: ['scanQRCode', 'getNetworkType'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  </script>

    <!-- avalon -->
    <script type="text/javascript" src="/wechat/static/src/avalon/avalon.modern.min.js"></script>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="/wechat/static/src/framework7/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript">
      //自定义的脚本引入，末尾添加随机数来解决微信JS的缓存问题
      var url = "\<script language=\"javascript\" type=\"text/javascript\" src=\"/dzx_weixin/static/src/js/scanActivate-app.js?"+Math.random()+"\"><\/script\>";
      //console.log(url);
      document.write(url); 
    </script>
</body>
</html>